<!--查看合同审批情况-->
<template>
<!--  -->
  <div class='container'>
     <el-form :model="formData" ref="formData" label-width="200px">
          <el-row>
               <el-col :span="10">
                     <el-form-item
                    label="省份:"
                    prop="reAmountCause"
                    label-width="80px"
                >
                <el-select v-model="formData.PrvnceId"  placeholder="请选择" @change="prvnceIdChange">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            >
                        </el-option>
                  </el-select>

                  </el-form-item>
                  </el-col>
                   <el-col :span="12">
                     <el-form-item
                    label="合同编号(含无合同立项)/合同发起号:"
                    prop="formData.ContractCode"
                >
                    <el-input
                    placeholder="请输入内容"
                    v-model="formData.ContractCode"
                    >
                    </el-input>
                  </el-form-item>
               </el-col>
               <el-col :span="2">
                 <el-button type="primary" @click="queryHandel">查 询</el-button>
               </el-col>
          </el-row>

        <el-row>
              <fieldset class="contain-box">
                  <legend class="contain-title">合同详细信息</legend>
                   <el-col :span="6">
                     <el-form-item
                    label="合同编号(含无合同立项):"

                >
                    <span>
                      {{formData.contractCode}}
                    </span>
                  </el-form-item>
               </el-col>
                <el-col :span="6">
                     <el-form-item
                    label="合同发起号:"

                >
                    <span>
                      {{formData.SingCode}}
                    </span>
                  </el-form-item>
               </el-col>
                <el-col :span="6">
                     <el-form-item
                    label="合同名称:"

                >
                    <span>
                      {{formData.ContractName}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="6">
                     <el-form-item
                    label="合同承办人:"
                >
                   <span>
                    {{formData.userName}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                     <el-form-item
                    label="承办人联系电话:"
                >
                    <span>
                    {{formData.userPhone}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="6">
                     <el-form-item
                      label="合同类型:"
                  >
                     <span>
                    {{formData.contractClass}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="6">
                  <el-form-item
                    label="是否ICT合同:"
                   >
                   <span>
                    {{formData.ifIctProject}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="6">
                     <el-form-item
                      label="是否一站式合同:"
                    >
                    <span>
                      {{formData.ifInterProvincial}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="6">
                     <el-form-item
                    label="合同当前状态:"
                >
                   <span>
                     {{formData.status}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="6">
                     <el-form-item
                    label="合同当前办理人:"
                >
                     <span>
                       {{formData.ctcurRuserName}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="6">
                     <el-form-item
                    label="合同当前班里人联系电话:"
                >
                     <span>
                       {{data.ctctel}}
                    </span>
                  </el-form-item>
               </el-col>
              </fieldset>
        </el-row>
          <el-row>
              <fieldset class="contain-box">
                  <legend class="contain-title">合同立项信息</legend>
                   <el-col :span="8">
                     <el-form-item
                    label="项目编码："
                >
                    <span>
                      {{formData.itemCode}}
                    </span>
                  </el-form-item>
               </el-col>
                <el-col :span="8">
                     <el-form-item
                    label="项目立项类型:"
                >
                   <span>
                      {{formData.createType}}
                    </span>
                  </el-form-item>
               </el-col>
                <el-col :span="8">
                     <el-form-item
                    label="立项状态:"
                >
                    <span>
                       {{formData.itemStatus}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                     <el-form-item
                    label="立项部门:"
                >
                    <span>
                      {{formData.proApplyDeptName}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                     <el-form-item
                    label="立项人:"
                >
                    <span>
                       {{formData.itApplyUserId}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                     <el-form-item
                    label="立项人联系电话:"
                >
                   <span>
                        {{formData.ittel}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                     <el-form-item
                    label="立项当前办理人:"
                >
                   <span>
                      {{formData.itCurrUserName}}
                    </span>
                  </el-form-item>
               </el-col>
               <el-col :span="8">
                     <el-form-item
                    label="项目当前办理人联系电话:"
                >
                   <span>
                     {{formData.itctel}}
                    </span>
                  </el-form-item>
               </el-col>

              </fieldset>
        </el-row>
          <el-row v-if="ondeStopContractIsShow">
              <fieldset class="contain-box">
                  <legend class="contain-title">一站式合同分项目信息</legend>
                   <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="item" name="index" v-for="(item,index) in cityArrList" :key="index">
                      <el-row>
                      <el-col :span="6">
                        <el-form-item
                          label="项目号"
                      >
                        <span>
                          {{item.proCode}}
                        </span>
                      </el-form-item>
                   </el-col>
                   <el-col :span="6">
                        <el-form-item
                          label="项目立项类型"
                      >
                        <span>
                          {{item.createType}}
                        </span>
                      </el-form-item>
                   </el-col>
                    <el-col :span="6">
                        <el-form-item
                          label="立项状态"
                      >
                        <span>
                          {{item.proStatus}}
                        </span>
                      </el-form-item>
                   </el-col>
                    <el-col :span="6">
                        <el-form-item
                          label="下发省份"
                      >
                        <span>
                          {{data.inTerProvinCilisCope}}
                        </span>
                      </el-form-item>
                   </el-col>
                    <el-col :span="12">
                        <el-form-item
                          label="立项部门"
                      >
                        <span>
                          {{item.proApplyDept}}
                        </span>
                      </el-form-item>
                   </el-col>
                   <el-col :span="6">
                        <el-form-item
                          label="项目接收人:"
                      >
                        <span>
                          {{item.proUserId}}
                        </span>
                      </el-form-item>
                   </el-col>
                    <el-col :span="12">
                        <el-form-item
                          label="项目接收人联系电话"
                      >
                        <span>
                          {{item.proTel}}
                        </span>
                      </el-form-item>
                   </el-col>
                   <el-col :span="6">
                        <el-form-item
                          label="当前办理人："
                      >
                        <span>
                          {{item.proCurrUserName}}
                        </span>
                      </el-form-item>
                   </el-col>
                    <el-col :span="12">
                        <el-form-item
                          label="当前办理人联系电话："
                      >
                        <span>
                          {{item.proCode}}
                        </span>
                      </el-form-item>
                   </el-col>
                </el-row>
                 </el-tab-pane>
                    <el-tab-pane label="河北" name="second">河北</el-tab-pane>
                    <el-tab-pane label="北京" name="third">北京</el-tab-pane>

                  </el-tabs>

              </fieldset>
        </el-row>
        </el-form>
  </div>
</template>

<script>
import orderSevers from "@/api/order/AendFilling";
import { mapState, mapGetters, mapActions } from "vuex";
  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {},
    // 这里存放数据
    data () {
      return {
        formData:{
          // 合同编号(含无合同立项):
          ContractCode:"",
          // 合同名称
          ContractName:"",
          PrvnceId:"",
          SingnCode:"",
          reAmountCause:"",
          // 合同发起号
          SingCode:"",
          // 合同承办人
          userPhone:"",
          // 承办人联系电话
          userPhone:"",
          // 合同类型
          contractClass:"",
          // 是否ICT合同
          ifIctProject:"",
          // 是否一站式合同
          ifInterProvincial:"",
          // 合同当前状态
          status:"",
          // 合同当前办理人
          ctcurRuserName:"",
          // 合同当前班里人联系电话
          ctctel:"",
          // 项目编码
          itemCode:"",
          // 项目立项类型
          createType:"",
          // 立项状态
          itemStatus:"",
          // 立项部门-id
          proApplyDeptId:"",
          // 立项部门-名称
          proApplyDeptName:"",
          // 立项人
          itApplyUserId:"",
          // 立项人电话
          ittel:"",
          // 立项当前办理人
          itCurrUserName:"",
          // 项目当前办理人联系电话
          itctel:"",
        },
        data:{
          reAmountCause:"123"
        },
        activeName:"",
        options:[
          {
            value:"HQ",
            label:"集团"
          },
           {
            value:"BJ",
            label:"北京"
          },
          {
            value:"ZJ",
            label:"浙江"
          },
          {
            value:"SH",
            label:"上海"
          },
          {
            value:"JS",
            label:"江苏"
          },
           {
            value:"HN",
            label:"湖南"
          },
          {
            value:"HB",
            label:"湖北"
          },
          {
            value:"SN",
            label:"陕西"
          },
          {
            value:"HI",
            label:"海南"
          },
          {
            value:"GX",
            label:"广西"
          },
          {
            value:"AH",
            label:"安徽"
          },
           {
            value:"CQ",
            label:"重庆"
          },
          {
            value:"SC",
            label:"四川"
          },
          {
            value:"YN",
            label:"云南"
          },
          {
            value:"XZ",
            label:"西藏"
          },
          {
            value:"GS",
            label:"甘肃"
          },
          {
            value:"NX",
            label:"宁夏"
          },
          {
            value:"GZ",
            label:"贵州"
          },
           {
            value:"QH",
            label:"青海"
          },
          {
            value:"XJ",
            label:"新疆"
          },
          {
            value:"TJ",
            label:"天津"
          },
           {
            value:"FJ",
            label:"福建"
          },
          {
            value:"JX",
            label:"江西"
          },
          {
            value:"HL",
            label:"黑龙江"
          },
          {
            value:"JL",
            label:"吉林"
          },
          {
            value:"LN",
            label:"辽宁"
          },
          {
            value:"HE",
            label:"河北"
          },
          {
            value:"SX",
            label:"山西"
          },
          {
            value:"SD",
            label:"山东"
          },
          {
            value:"HA",
            label:"河南"
          },
          {
            value:"NM",
            label:"内蒙古"
          },
          {
            value:"UC",
            label:"天翼电信终端有限公司本部"
          },
          {
            value:"UD",
            label:"号百信息服务有限公司"
          },
          {
          value:"UE",
            label:"中国电信集团系统集成有限责任公司"
          },
          {
          value:"UR",
            label:"国际"
          },
          {
            value:"US",
            label:"澳门"
          },
          {
            value:"VD",
            label:"中国电信股份有限公司卫星通信分公司"
          },

        ],
        ondeStopContractIsShow:false,
        cityArrList:[]
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {},
    mounted () {},
    // 方法集合
    methods: {
      queryHandel(){
        
        this.qryContactApproval();
      },
      handleClick(){},
      // 查询合同审批情况
      async qryContactApproval(){

        let params={
           "SystemID":"1212",//固定
            "PrvnceId":this.formData.PrvnceId,//省份编码
            "ContractCode":this.formData.ContractCode,//合同编码
        }
       var res = await orderSevers.qryContactApproval(params);
        
        debugger
        if(res.code==200){
          // 合同编码
          let data=res.svcCont.requestObject.SvcCont.RespInfo
          this.formData.ContractCode=data.contractCode;
          //  合同发起号
          this.formData.SingCode=data.SingCode;
          //  合同名称
          this.formData.ContractName=data.ContractName;
           //  合同承办人
          this.formData.userName=data.userName;
            // 承办人电话
            this.formData.userPhone=data.userPhone;
            // 合同类型
            this.formData.contractClass=data.contractClass;
            // 合同类型
            this.formData.contractClass=data.contractClass;
            // 是否ICT业务合同
            this.formData.ifIctProject=data.ifIctProject=="1"?"是":"否";
            // 是否一站式合同
            this.formData.ifInterProvincial=data.ifInterProvincial=="1"?"是":"否";
         // 合同状态
         if(data.status){};
         if(data.toProviceItem==""){
           this.ondeStopContractIsShow=false;
         }else{
           this.ondeStopContractIsShow=true;
           this.cityArrList=data.toProviceItem;
         }
         this.formData.status=data.status;
        //  合同当前办理人
         this.formData.ctcurRuserName=data.ctcurRuserName;
          // 联系方式
         this.formData.ctctel=data.ctctel;
           // 项目编码
         this.formData.itemCode=data.itemCode;
            // 项目立项类型
         this.formData.createType=data.createType;
            // 立项状态
         this.formData.itemStatus=data.itemStatus;
          // 立项部门名称
         this.formData.proApplyDeptName=data.proApplyDeptName;
          // 立项人
         this.formData.itApplyUserId=data.itApplyUserId;
         // 立项人电话
         this.formData.ittel=data.ittel;
         // 立项人电话
         this.formData.itCurrUserName=data.itCurrUserName;
        //  立项当前办理人
        this.formData.itCurrUserName=data.itCurrUserName;
         //  立项办理人电话
        this.formData.itctel=data.itctel;
        }
      },


      prvnceIdChange(val){
        
        this.formData.PrvnceId=val;

      }
    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate () {},
    // 生命周期 - 数据挂载之前
    beforeMount () {},
    // 生命周期 - 数据更新之前
    beforeUpdate() {},
    // 生命周期 - 数据更新之后
    updated () {},
    // 生命周期 - 页面销毁之前
    beforeDestroy() {},
    // 生命周期 - 页面销毁完成
    destroyed () {},
  }
</script>

<style scoped>
  /* @import url(); 引入公共css类 */
  .dialog-footer{
    padding:0.2rem 0;
  }
 .text-c{
   text-align:center

  }
  .contain-box {
    padding: 0.2rem;
    border: 1px solid #f56f3c;
    margin-top:0.2rem;
}
.contain-title {
  margin-left: 0.4rem;
  padding: 0 0.1rem;
  font-weight: bold;
  color:#f56f3c;
}
.el-form-item{
  margin-bottom:0.0rem;
}

</style>
